<template>
    <div>
        <!-- v-show="show" -->
        <div id="photoview-container" class="photoview-container" >
            <div class="photoview-tools">
                <div class="button return" @click="back"> 返回 </div> 
                <a :href="properties.uploadherf" target="_blank"><div class="button upload"> 传照片 </div></a>
            </div>
            <div class="photoview-window">
                <div class="prev-photo">
                    <div class="arrow-container-left" @click="arrowleft"><div class="arrow-left" ></div></div>
                </div>
                <div class="window-viewport">
                    <div class="picture-container"> 
                        <img id="viewport" class="viewport" height="360" width="720" :src="properties.pics[properties.showindex].src">
                    </div>
                </div>
                <div class="next-photo">
                    <div class="arrow-container-right" @click="arrowright"><div class="arrow-right" ></div></div>
                </div>
            </div>
            <div class="photoview-scroll">
                <div class="prev-group" @click="arrowprev"> 
                    <i class="arrow-left"></i>  
                </div>
                <div class="scroll-container">
                    <ul class="scroll-list" :style="styleObj" :data-pagenum="getpagenum">
                        <li :class="['picture',getcurrent(index)]" :id="forId(index)" v-for="(item,index) in properties.pics" :key="index" @click="clickpic(index)">
                            <img  :src="item.src" class="accept-default-image">
                        </li>
                    </ul>
                </div>
                <div class="next-group"  @click="arrownext"> 
                    <i class="arrow-right"></i> 
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        components: {},
        data() {
            return {
                show:true,
                showindex:0,
                uploadherf:'',
                properties:{
                    pics:[
                        {
                            src:'https://mapsv0.bdimg.com/?qt=pr3d&panoid=1001310000150317200445323IN&width=720&height=360&heading=292pitch=0fovy=75&quality=80',
                            active:false,
                        },
                        {
                            src:'http://d.hiphotos.baidu.com/map/pic/item/71cf3bc79f3df8dc22cf7b70c311728b46102865.jpg',
                            active:false,
                        },
                        {
                            src:'http://d.hiphotos.baidu.com/map/pic/item/71cf3bc79f3df8dc22977b70c311728b461028ad.jpg',
                            active:false,
                        },
                        {
                            src:'https://mapsv0.bdimg.com/?qt=pr3dpoi&uid=3a0fbba8170524419ee32117&width=720&height=360&quality=80&fovx=120',
                            active:true,
                        },
                        {
                            src:'//webmap0.bdimg.com/client/services/thumbnails?&amp;width=120&amp;align=bottom,center&amp;height=80&amp;quality=100&amp;src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fmap%2Fpic%2Fitem%2Fb58f8c5494eef01ffcf7ec24eefe9925bd317d74.jpg',
                            active:false,
                        },
                        {
                            src:'//webmap0.bdimg.com/client/services/thumbnails?&amp;width=120&amp;align=bottom,center&amp;height=80&amp;quality=100&amp;src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fmap%2Fpic%2Fitem%2F9a504fc2d56285355d1226c09eef76c6a6ef6365.jpg',
                            active:false,
                        },
                        {
                            src:'//webmap0.bdimg.com/client/services/thumbnails?&amp;width=120&amp;align=bottom,center&amp;height=80&amp;quality=100&amp;src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fmap%2Fpic%2Fitem%2F34fae6cd7b899e51196dcef54ca7d933c9950d6b.jpg',
                            active:false,
                        },
                        {
                            src:'//webmap0.bdimg.com/client/services/thumbnails?&amp;width=120&amp;align=bottom,center&amp;height=80&amp;quality=100&amp;src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fmap%2Fpic%2Fitem%2Fd53f8794a4c27d1ed1d4cf2515d5ad6edcc43864.jpg',
                            active:false,
                        },
                        {
                            src:'//webmap0.bdimg.com/client/services/thumbnails?&amp;width=120&amp;align=bottom,center&amp;height=80&amp;quality=100&amp;src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fmap%2Fpic%2Fitem%2F42166d224f4a20a42dfec8269e529822730ed06b.jpg',
                            active:false,
                        },
                        {
                            src:'//webmap0.bdimg.com/client/services/thumbnails?&amp;width=120&amp;align=bottom,center&amp;height=80&amp;quality=100&amp;src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fmap%2Fpic%2Fitem%2Fc8ea15ce36d3d5393d97fb223487e950342ab0ad.jpg',
                            active:false,
                        },
                        {
                            src:'http://g.hiphotos.baidu.com/map/pic/item/8644ebf81a4c510fa72516fb6e59252dd52aa56a.jpg',
                            active:false,
                        },
                        {
                            src:'http://a.hiphotos.baidu.com/map/pic/item/0ff41bd5ad6eddc45905401a37dbb6fd53663374.jpg',
                            active:false,
                        },
                        {
                            src:'http://b.hiphotos.baidu.com/map/pic/item/3b87e950352ac65c81a19292f5f2b21192138aaf.jpg',
                            active:false,
                        },
                        {
                            src:'http://a.hiphotos.baidu.com/map/pic/item/0ff41bd5ad6eddc45905401a37dbb6fd53663374.jpg',
                            active:false,
                        }

                    ],
                    activepic:{},
                },
                propertiesInside:{
                    pic_num:0,//12.5
                    pagenum:0,
                }
                
            }
        },
        created() {},
        mounted() {
            //this.getpic_num();
            //window.onresize=this.getpic_num;
        },
        computed: {
            getpagenum(){
                this.propertiesInside.pagenum=parseInt((this.showindex+1) /this.propertiesInside.pic_num)
            },
            styleObj(){
                let offset=this.propertiesInside.pagenum*parseInt(this.propertiesInside.pic_num)*136;
                return {
                    width: "4694px",
                    left: -offset+"px"
                }
            }
        },
        methods: {
            forId:function(index){
				return "img-" +index
            },
            getcurrent(index){
                
                return index==this.properties.showindex?'current-img':'';
            },
            back() {
                this.properties.hide=false;
            },
            arrowleft(){
                if(this.properties.showindex>0){
                    this.properties.showindex+=-1;
                }
            },
            arrowright(){
                if(this.properties.showindex<=this.properties.pics.length-2){
                    this.properties.showindex+=1;
                }
            },
            clickpic(index){
                this.properties.showindex=index;
            },
            getpic_num(event){
                let screen_width=document.body.clientWidth
                screen_width=screen_width-15*2;
                screen_width=screen_width*0.9;
                let pic_num=screen_width/136
                this.propertiesInside.pic_num=pic_num;
                //console.log(screen_width);
            },
            arrowprev(){
                if(this.propertiesInside.pagenum>0){
                    this.propertiesInside.pagenum+=-1;
                }
            },
            arrownext(){
                if(this.propertiesInside.pagenum<=Math.ceil(this.properties.pics.length /parseInt(this.propertiesInside.pic_num))-2){
                    this.propertiesInside.pagenum+=1;
                }
            },
            refreshLedt(){

            },
        },
        
    }
</script>
<style scoped>
a {
    color: #00c;
    text-decoration: underline;
    outline: 0;
    cursor: pointer;
}
a, input, select {
    font-size: 12px;
}
#photoview-container {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
    z-index: 100001;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    user-drag: none;
}
.photoview-window {
    position: fixed;
    top: 50%;
    width: 100%;
    height: 65%;
    -webkit-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    transform: translateY(-60%);
}
.photoview-scroll {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    height: 116px;
    bottom: 0;
    background-color: rgba(0,0,0,.8);
}
.photoview-tools {
    position: absolute;
    top: 20px;
    left: 20px;
}
.photoview-tools .return {
	background-repeat:no-repeat;
	background-image:url(//webmap1.bdimg.com/wolfman/static/poidetail/images/return-2x_ecd03df.png);
	background-size:9px 16px;
	background-position:30px 17px
}

.photoview-tools .upload {
	background-repeat:no-repeat;
	background-image:url(//webmap0.bdimg.com/wolfman/static/poidetail/images/camera-2x_e48e3eb.png);
	background-size:22px 18px;
	background-position:20px 16px
}
.photoview-tools .upload:hover {
	color:#3284fb;
	background-repeat:no-repeat;
	background-image:url(//webmap1.bdimg.com/wolfman/static/poidetail/images/camera-hover-2x_9ee7a95.png);
	background-size:22px 18px;
	background-position:20px 16px
}
.photoview-tools .return:hover {
	color:#3284fb;
	background-repeat:no-repeat;
	background-image:url(//webmap0.bdimg.com/wolfman/static/poidetail/images/return-hover-2x_fd128b5.png);
	background-size:9px 16px;
	background-position:30px 17px
}
.photoview-tools .button {
    padding-left: 28px;
    box-sizing: border-box;
    float: left;
    width: 135px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(0,0,0,.8);
    color: #fff;
    font-size: 18px;
    margin-right: 15px;
    cursor: pointer;
}

.photoview-scroll .prev-group {
    height: 86px;
    width: 35px;
    position: absolute;
    left: 15px;
    top: 15px;
    background-color: #000;
    cursor: pointer;
}
.photoview-scroll .next-group {
    height: 86px;
    width: 35px;
    position: absolute;
    right: 15px;
    top: 15px;
    background-color: #000;
    cursor: pointer;
}
.photoview-scroll .arrow-left {
	width:13px;
	height:25px;
	position:absolute;
	background-repeat:no-repeat;
	background-image:url(//webmap0.bdimg.com/wolfman/static/poidetail/images/view-arrow_7ab7e13.png);
	background-size:58px 25px;
	top:30px;
	right:10px
}
.photoview-scroll .arrow-right {
	width:13px;
	height:25px;
	position:absolute;
	background-repeat:no-repeat;
	background-image:url(//webmap0.bdimg.com/wolfman/static/poidetail/images/view-arrow_7ab7e13.png);
	background-size:58px 25px;
	background-position:-30px;
	top:30px;
	right:10px
}
.photoview-scroll .next-group:hover .arrow-right {
	background-position:-45px
}
.photoview-scroll .prev-group:hover .arrow-left {
	background-position:-15px
}

.photoview-scroll .scroll-container {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	height:100%;
	width:90%;
	overflow:hidden
}
.photoview-scroll .scroll-container .scroll-list {
	position:absolute;
	-webkit-transition:.3s ease-in-out;
    transition:.3s ease-in-out;
    
}
.photoview-scroll .scroll-container .picture {
	width:120px;
    height:80px;
    box-sizing: content-box;
}
.photoview-scroll .picture {
	float:left;
	margin-right:10px;
	border:3px solid rgba(0,0,0,.8);
	overflow:hidden
}
.photoview-scroll .picture-loading {
	background:url(//webmap1.bdimg.com/wolfman/static/poidetail/images/loading_d0c0773.gif) no-repeat center center;
	background-size:30px
}
.photoview-scroll .current-img {
	border:3px solid #3284fb
}
.photoview-scroll .accept-default-image{
	border:0;
	background-size:cover;
	width:120px;
	height:auto;
	min-height:80px;
	cursor:pointer
}
.photoview-scroll .accept-default-image,.photoview-window .accept-default-image{
	background:url(//webmap0.bdimg.com/wolfman/static/poidetail/images/default-image_b0276c9.png);
}
.photoview-window .window-viewport {
	position:relative;
	margin:auto;
	height:100%;
	width:50%
}
.photoview-window .window-viewport .picture-container {
	height:100%;
	width:100%;
	text-align:center
}
.photoview-window .window-viewport .viewport {
	position:relative;
	max-width:100%;
	max-height:100%;
	top:50%;
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
	-webkit-transition:.15s ease-in-out;
	transition:.15s ease-in-out;
	border:3px solid #fff;
	border-radius:5px;
	
	background-size:40px;
	background-color:darkgrey;
	-webkit-animation:move .25s;
	animation:move .25s
}
/* .photoview-window .window-viewport .viewport {
	background:url(//webmap1.bdimg.com/wolfman/static/poidetail/images/loading_d0c0773.gif) no-repeat center center;
} */
.photoview-window .prev-photo {
	position:absolute;
	height:100%;
	width:25%;
	left:0;
	top:0
}
.photoview-window .next-photo {
	position:absolute;
	height:100%;
	width:25%;
	right:0;
	top:0
}
.photoview-window .arrow-container-left {
	width:90px;
	height:90px;
	position:absolute;
	border-radius:50px;
	top:41%;
	right:10%;
	background-color:rgba(0,0,0,.9);
	cursor:pointer
}
.photoview-window .arrow-container-right {
	width:90px;
	height:90px;
	position:absolute;
	border-radius:50px;
	top:41%;
	left:10%;
	background-color:rgba(0,0,0,.9);
	cursor:pointer
}
.photoview-window .arrow-left {
	width:26px;
	height:50px;
	position:relative;
	background-repeat:no-repeat;
	background-image:url(//webmap1.bdimg.com/wolfman/static/poidetail/images/view-arrow-2x_e42f616.png);
	background-size:116px 50px;
	top:20px;
	left:28px
}
.photoview-window .arrow-right {
	width:26px;
	height:50px;
	position:absolute;
	background-repeat:no-repeat;
	background-image:url(//webmap1.bdimg.com/wolfman/static/poidetail/images/view-arrow-2x_e42f616.png);
	background-size:116px 50px;
	background-position:-60px;
	top:20px;
	left:37px
}
.photoview-window .arrow-container-left:hover {
	background-color:rgba(0,0,0,.6)
}
.photoview-window .arrow-container-left:hover .arrow-left {
	background-position:-30px
}
.photoview-window .arrow-container-right:hover {
	background-color:rgba(0,0,0,.6)
}
.photoview-window .arrow-container-right:hover .arrow-right {
	background-position:-90px
}
    
@-webkit-keyframes move {
	from {
		opacity:0
	}
	to {
		opacity:1
	}
}
@keyframes move {
	from {
		opacity:0
	}
	to {
		opacity:1
	}
}
</style>